<template>
  <div>
    <template>
      <div style="padding-top: 10px;">
        <el-alert
          :title="msg"
          type="info">
          <div>
            <el-collapse accordion style="margin-top: 10px;">
              <el-collapse-item>
                <template slot="title">
                  <span style="color: #20A0FF;">配置中心的作用</span>
                </template>
                <div style="margin-left: 20px">为用户提供自定义结构化配置的功能。<br></div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <span style="color: #20A0FF;">概念说明</span>
                </template>
                <div style="margin-left: 20px">用户：现在只能使用内网账号才能登录，第一次登录配置中心后会生成账号。<br>
                  应用：新应用接入时需要注册新应用，配置中心会自动生成对应配置空间。<br>
                  配置空间：用户可以在配置空间下配置子孙节点。所有节点成树形结构，根节点的子节点称为配置空间。<br>
                  配置节点：树形结构中的每一个节点称为配置节点，每一个配置节点最多可以关联一个配置集。<br>
                  配置集：配置集用来聚合一组有意义的配置字段，例如城市名称，城市编号等字段可以定义城市的概念。<br>
                  配置字段：配置的单条属性称为配置字段，例如城市名称。每个字段可以设置字段类型，是否可空等属性。<br>
                  配置项：单条配置数据称之为配置项例如名称为北京，编号为1，城市人数为100...就组成一个配置项。
                </div>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  <span style="color: #20A0FF;">配置中心操作步骤</span>
                </template>
                <div style="margin-left: 20px">见下面流程，详情请参见:<a href="https://lark.alipay.com/travelhub/public/xq5116"
                                                              target="_blank">配置中心使用说明</a></div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-alert>
      </div>
    </template>
    <div class="info">
      <div class="step">
        <el-steps :space="250" :active="active" :align-center="isCenter" :center="isCenter">
          <el-step title="注册应用"></el-step>
          <el-step title="创建配置集"></el-step>
          <el-step title="创建配置节点"></el-step>
          <el-step title="维护配置项"></el-step>
        </el-steps>
      </div>
      <div class="carousel">
        <el-carousel indicator-position="inside" @change="next" trigger="click" height="400px" type="card"
                     :autoplay=false>
          <el-carousel-item key="1">
            <el-card class="box-card" style="width: 100%;height: 100%;padding: 0px;background-color: #E5E9F2">
              <div slot="header" class="clearfix" style="height: 10px;">
                <span style="line-height: 10px;">注册应用</span>
                <span style="line-height: 10px;float: right;margin-top: -7px">
                  <el-button type="text" @click="open('app')">详细信息</el-button>
                </span>
              </div>
              <div class="text item" style="padding: 0px">
                <img src="../../assets/img/appRegister.png" alt="" class="img-rounded"
                     style="width: 100%;height: 290px;margin-top: 0px;">
              </div>
            </el-card>
          </el-carousel-item>
          <el-carousel-item key="2">
            <el-card class="box-card" style="width: 100%;height: 100%;padding: 0px;background-color: #E5E9F2">
              <div slot="header" class="clearfix" style="height: 10px;">
                <span style="line-height: 10px;">创建配置集</span>
                <span style="line-height: 10px;float: right;margin-top: -7px">
                  <el-button type="text" @click="open('map')">详细信息</el-button>
                </span>
              </div>
              <div class="text item" style="padding: 0px">
                <img src="../../assets/img/addCfg.png" alt="" class="img-rounded"
                     style="width: 100%;height: 280px;margin-top: 0px;">
              </div>
            </el-card>
          </el-carousel-item>
          <el-carousel-item key="3">
            <el-card class="box-card" style="width: 100%;height: 100%;padding: 0px;background-color: #E5E9F2">
              <div slot="header" class="clearfix" style="height: 10px;">
                <span style="line-height: 10px;">创建配置节点</span>
                <span style="line-height: 10px;float: right;margin-top: -7px">
                  <el-button type="text" @click="open('node')">详细信息</el-button>
                </span>
              </div>
              <div class="text item" style="padding: 0px">
                <img src="../../assets/img/addNode.png" alt="" class="img-rounded"
                     style="width: 100%;height: 285px;margin-top: 0px;">
              </div>
            </el-card>
          </el-carousel-item>
          <el-carousel-item key="4">
            <el-card class="box-card" style="width: 100%;height: 100%;padding: 0px;background-color: #E5E9F2">
              <div slot="header" class="clearfix" style="height: 10px;">
                <span style="line-height: 10px;">维护配置项</span>
                <span style="line-height: 10px;float: right;margin-top: -7px">
                  <el-button type="text" @click="open('item')">详细信息</el-button>
                </span>
              </div>
              <div class="text item" style="padding: 0px">
                <img src="../../assets/img/addItem.png" alt="" class="img-rounded"
                     style="width: 100%;height: 290px;margin-top: 0px;">
              </div>
            </el-card>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<style>
  .info {
    margin-top: 20px;
  }

  .carousel {
    width: 80%;
    margin-left: 110px;
  }

  .grid-head {
    height: 35px;
    font-weight: bold;
    font-size: x-large;
    background-color: #E5E9F2;
    text-align: center;
  }

  .grid-left {
    background-color: #475669;
    height: 350px;
  }

  .grid-right {
    background-color: #C0CCDA;
    height: 350px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 580px;
    height: 500px;
  }
</style>

<script>

  export default {
    name: 'hello',
    data: function () {
      return {
        active: 0,
        isCenter: true,
        height: '300'
      }
    },
    computed: {
      msg: function () {
        let user = this.$store.state.currentUser;
        if (user.nickName || user.nickName == "") {
          return user.lastName + ", 欢迎您 : 来到配置中心-配置帮助界面，下面为您展示了配置接入的详细步骤 :";
        } else {
          return user.nickName + ", 欢迎您 : 来到配置中心-配置帮助界面，下面为您展示了配置接入的详细步骤 :";
        }
      }
    },
    methods: {
      next(val) {
        this.active = val;
      },
      open(val) {
          if(val == 'app'){
            this.$notify.success({
              title: '应用注册:',
              message: '配置中心数据推送依赖阿里云的消息队列MQ产品ons，所以需要用户端订阅消息,ons提供创建access key功能，可以生成 Access Key ID和 Access Key Secret，订阅消息时得到 Consumer ID。'
              +'因为每个Consumer ID独立消费消息，所以建议每个应用使用独立的Consumer ID。token是配置中心和应用对接时的令牌，数据会用它进行加解密，若不设置，系统会自动生成，自动生成的话请到群里索取，'
              +'这个值需要在客户端进行配置。测试环境建议自己填写。创建应用后系统会自动生成配置空间，建议在配置空间下维护你需要的配置节点。应用管理员拥有对应配置空间下所有节点的权限，请谨慎授权。'
              + '后续会开放定时刷新配置模式，供不依赖ons的用户使用',
              offset: 100
            });
          }else if(val == 'map'){
            this.$notify.success({
              title: '创建配置集:',
              message: '因为现在创建配置节点的时候就要关联配置集，所以需要先创建配置集。键类型分为单键和组合键，类似数据库中索引和联合索引。每个配置集下可以配置多个字段，字段有多个属性',
              offset: 100
            });
          }else if(val == 'node'){
            this.$notify.success({
              title: '创建配置节点:',
              message: '你可以根据不同场景，在应用下配置多个路径，配置节点是树形结构。建议只在叶子节点上关联配置集。父节点的管理员拥有子节点的操作权限。节点路径即是客户端配置时需要填入的拉取/监听路径，这个值测试和生产环境应保持一致，方便客户端配置',
              offset: 100
            });
          }else if(val == 'item'){
            this.$notify.success({
              title: '维护配置项:',
              message: '每当你选择配置空间，下次会默认为你选择相同配置空间,对配置项的操作包括增加，删除，修改，复制',
              offset: 100
            });
          }
      }
    }
  }
</script>
